<!--
 * @Description: 特材原料检验审批
 * @Author: wangwangwang
 * @Date: 2020-12-16 11:47:43
 * @LastEditors: wangwangwang
 * @LastEditTime: 2021-05-07 10:44:24
-->
<template>
  <div class="flows-content">
    <el-container>
      <el-main style="margin-bottom: 20px; padding: 0;">
        <el-container direction="vertical">
          <FlowHeader :isReadOnly="readOnly" @saveSubmit="handleSubmit(1)" @sendSubmit="handleSubmit(2)" @handleBackEnd="handleSubmit(3)" @handleCC="handleSubmit(4)" @handleAssign="handleSubmit(5)" @handleBackUp="handleSubmit(6)" @handleAssist="handleSubmit(7)" @handleNode="handleSubmit(8)" @handleNodeImage="handleSubmit(9)" @handleCollection="handleSubmit(10)" />
          <el-main class="info">
            <div>
              <el-input v-model="title" class="flow-title" :disabled="$route.query.type*1!==1" placeholder="请输入流程标题"></el-input>
            </div>
            <div class="info-top">
              <div class="left">
                <span>单据号码：{{billCode}}</span>
                <span class="text">制单日期：{{billDate}}</span>
              </div>
              <div class="right">
                <span>发起人：{{applyPerson}}</span>
                <span class="text">状态：{{taskTypeText[taskStatus*1]}}</span>
              </div>
            </div>
            <div style="margin-top:20px;">
              <div class="flows-details">
                <el-form label-width="150px" :disabled='readOnly'>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="系统检测结果">
                        <span>NG</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="处理方式">
                        <el-input v-model="method" :disabled='readOnly || typeId!==4' placeholder="请输入"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item :label="title1">
                        <span>{{formData.rawName || formData.productName}}</span>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item :label="title2">
                        <span>{{formData.rawModel || formData.productModel}}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="检验编号">
                        <span>{{formData.code}}</span>
                      </el-form-item>
                    </el-col>
                    <el-col v-if="typeId===1||typeId===2" :span="12">
                      <el-form-item label="供应商">
                        <span>{{formData.supplierName}}</span>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item label="备注">
                        <el-input v-model="formData.remark" :disabled='readOnly' :rows="2" resize="none" type="textarea" placeholder="请输入" clearable></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
              <div>
                <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="tableSource" tooltip-effect="dark" height="100%">
                  <template v-for="(item, index) in tableNav">
                    <el-table-column :key="index" :label="item.name" align="center" :width="index == 0 ? '120px' : 'auto'">
                      <template slot-scope="scope">
                        <span v-if="index == 0">{{ scope.row[index] }}</span>
                        <div v-if="index !== 0 && scope.row[index]">
                          <el-select v-if="scope.row[index].type == 1" v-model="scope.row[index].testValue" disabled placeholder="请选择" style="width:100%;">
                            <el-option v-for="(item, index) in JSON.parse(scope.row[index].symbol)" :key="index" :label="item.name" :value="item.name"></el-option>
                          </el-select>
                          <el-input v-if="scope.row[index].type == 2" v-model="scope.row[index].testValue" placeholder="请输入" disabled clearable style="width:100%;"></el-input>
                          <span v-if="scope.row[index].type == 3">
                            <span>{{ scope.row[index].symbol }}</span>
                            <span v-if="scope.row[index].symbol.length==1">
                              <el-input v-model="scope.row[index].testValue" type="Number" style="width: 100%;" placeholder="请输入" disabled clearable></el-input>
                            </span>
                            <span v-else>
                              <el-input v-model="scope.row[index].testValue" style="width: 100%;" placeholder="请输入两个数据并用逗号隔开" disabled clearable></el-input>
                            </span>
                          </span>
                        </div>
                      </template>
                    </el-table-column>
                  </template>
                </el-table>
              </div>
            </div>
            <div class="file-container" style="margin: 20px 0;">
              视频/图片：
              <div v-for="(item, index) in filesList" :key="index" class="file-list">
                <video v-if="item.indexOf('mp4')>0" controls="controls" controlspreload="none" style="width:100%;height:100%;">
                  <source :src="process.env.VUE_APP_API_HOST+item" />
                </video>
                <el-image v-else style="width:100%;height:100%;" :src="process.env.VUE_APP_API_HOST+item" :preview-src-list="[process.env.VUE_APP_API_HOST+item]" :z-index="10000">
                </el-image>
              </div>
            </div>
            <div class="flows-details">
              <FlowContent ref="flowcontent" :title='title' :showSendVisible="showSendVisible" @handleCancel="handleCancel" @sendCode="sendCode" @handleFinish="handleFinish" @handleBusiness="handleBusiness" @submitData="submitDataType" @resetFlowState="resetFlowState" />
            </div>
          </el-main>
        </el-container>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import FlowContent from '@/components/WorkFlow/flowContent';
import FlowHeader from '@/components/WorkFlow/flowHeader';
import { getUserInfo } from "@/utils/auth.js";
import { updRawInfo, updRawInfo2 } from "@/api/smart/specialmaterial/checkout";
import addTab from "@/common/addTab.js";
export default {
  components: {
    FlowContent,
    FlowHeader,
  },
  data() {
    return {
      type: 0,
      title: '',
      billCode: '',
      billDate: '',
      applyPerson: '',
      taskTypeText: ['发起', '已保存', '审批中', '已完成', '撤销', '不通过'],
      taskStatus: 0,
      showSendVisible: false,
      readOnly: false,
      formData: {videoUrl:''},
      tableSource: [],
      tableNav: [],
      typeId: null,
      title1: '',
      title2: '',
      method: '',
      filesList: [],
    }
  },
  methods: {
    resetFlowState (type) {
      const params = {
        id: this.formData.id,
        state: type===1?4:5,
      }
      if (this.formData.typeId * 1 === 1 || this.formData.typeId * 1 === 2) {
        updRawInfo(params);
      } else {
        updRawInfo2(params);
      }
    },
    submitDataType() {
      const params = {
        id: this.formData.id,
        state: 3,
      }
      if (this.formData.typeId * 1 === 1 || this.formData.typeId * 1 === 2) {
        updRawInfo(params);
      } else {
        updRawInfo2(params);
      }
    },
    handleBusiness() {
      const newArry = [];
      for (let i = 0; i < this.tableSource.length; i += 1) {
        for (let item in this.tableSource[i]) {
          if (item !== '0' && this.tableSource[i][item]) {
            const data = {
              checkId: this.formData.id,
              typeId: this.formData.typeId,
              companyId: this.formData.companyId,
              rawId: this.formData.rawID || this.formData.productId,
              projectId: this.tableSource[i][item].itemsId,
              requireId: this.tableSource[i][item].claimId,
              content: this.tableSource[i][item].testValue,
            }
            newArry.push(data)
          }
        }
      }
      let url = '/icps/system/sign/materials/rawCheck/saveSubmitContent';
      if (this.formData.typeId * 1 === 3 || this.formData.typeId * 1 === 4) {
        url = '/icps/system/sign/materials/proCheck/saveSubmitContent'
      }
      const params = {
        process_success: {
          url,
          data: newArry,
          httpMethod: 'post',
        },
        process_failure: ''
      }
      this.showSendVisible = false;
      this.$refs.flowcontent.handleToFlow(params);
    },
    handleFinish(type, status) {
      const { query } = this.$route;
      const data = JSON.parse(query.dataContent);
      if (type === 2 && status * 1 === 2) {
        let method = this.method;
        if (this.typeId === 1) {
          method = 1
        } else if (this.typeId === 2) {
          method = 2
        }
        const params = {
          id: data.id,
          checkResult: 'NG',
          isRecheck: 'y',
          videoUrl: data.videoUrl,
          state: 2,
          method,
          remark: data.remark,
        }
        if (data.typeId * 1 === 1 || data.typeId * 1 === 2) {
          updRawInfo(params);
        } else {
          updRawInfo2(params);
        }
      }
      addTab.$emit("remove", this.$route.name);
    },
    handleSubmit(type) {
      const { query } = this.$route;
      if (query.type * 1 === 2 && type === 2 && query.taskType * 1 !== 2) { // 发起流程
        this.showSendVisible = true;
        return
      }
      const data = {
        dataSource: 'SpecialCheckFlows',
        dataContent: JSON.stringify({ ...this.formData, tableTitle: this.tableNav, method: this.method, tableDataSource: this.tableSource }), // 业务数据
      }
      this.$refs.flowcontent.saveFlows(type, data);
    },
    handleFlowChat() {
      this.$refs.flowcontent.showFlowNode()
    },
    handleCancel() {
      this.showSendVisible = false;
    },
    /**
     * @Description: 回显业务数据
     * @Param: 
     * @Author: wangwangwang
     */
    initFlowsData(data) {
      const { query } = this.$route;
      this.formData = data;
      if (data.videoUrl) {
        this.filesList = data.videoUrl.split(",");
      }
      if (data.typeId < 3 && this.formData.supplierName) {
        const supplierName = this.formData.supplierName.split('-');
        supplierName.pop();
        this.formData.supplierName = supplierName.join('-');
      }
      this.formData.code = query.code
      this.tableNav = JSON.parse(query.tableTitle);
      this.tableSource = JSON.parse(query.tableDataSource);
    },
    initFlowsData2() {
      const { query } = this.$route;
      this.formData = JSON.parse(query.dataContent);
      if (this.formData.videoUrl) {
        this.filesList = this.formData.videoUrl.split(",");
      }
      this.tableNav = this.formData.tableTitle;
      this.tableSource = this.formData.tableDataSource;
      this.method = this.formData.method;
      this.typeId = this.formData.typeId * 1;
      this.title = query.taskName;
      this.billCode = query.receiptNumber;
      this.billDate = query.createTime;
      this.applyPerson = query.createUserName;
      this.taskStatus = query.taskStatus;
      this.initTitle();
    },
    sendCode(code) {
      this.billCode = code;
    },
    initTitle() {
      if (this.typeId === 1 || this.typeId === 2) {
        this.title1 = '特材原料名称:';
        this.title2 = '原料型号:';
      } else {
        this.title1 = '特材成品名称:';
        this.title2 = '成品型号:';
      }
    }
  },
  mounted() {
    const { query } = this.$route;
    if (query.type * 1 === 1) { // 发起流程
      this.initFlowsData(query);
      /**
       * @Description: 判断为哪种流程
       * @Param: 
       * @Author: wangwangwang
       */
      let code = '';
      if (query.typeId) {
        code = ['', 'SpecialCheck1', 'SpecialCheck2', 'SpecialCheck3', 'SpecialCheck4'][query.typeId * 1]
      }
      this.$refs.flowcontent.initBaseData(code);
      this.billDate = new Date().Format('yyyy-MM-dd hh:mm:ss');
      this.applyPerson = getUserInfo().userRealName;
      this.typeId = query.typeId * 1;
      this.initTitle();
      switch (query.typeId * 1) {
        case 1:
          this.title = '特材原料检验审批';
          this.method = '复检'
          break;
        case 2:
          this.title = '特材原料复检审批';
          this.method = '退料'
          break;
        case 3:
          this.title = '特材成品入库审批'
          this.method = '复检'
          break;
        case 4:
          this.title = '特材成品复检审批'
          break;
        default:
          break;
      }
      return
    }
    this.initFlowsData2();
    if (query.isReadOnly*1===1) {
      this.readOnly = true;
    }
  },
  created() {
  },
}
</script>
<style lang="scss" scoped>
.flows-details {
  margin-top: 20px;
}
.info {
  padding: 0 20px;
  background: #fff;
  .info-top {
    font-size: $font_size;
    color: #000000;
    @include discen_al;
    justify-content: space-between;
    height: 50px;
    border-bottom: 1px #e1e5ed solid;
    .left {
      @include discen_al;
    }
    .text {
      margin-left: 60px;
    }
  }
}
.nav_title {
  @include discen_al;
  align-items: flex-end;
  > div {
    width: 4px;
    height: 24px;
    background: $bg_color;
    margin-right: 10px;
  }
  i {
    margin-left: 5px;
  }
  color: $bg_color;
  font-size: 20px;
  font-weight: bold;
}
</style>